<template>
  <view>
    <image src="../../static/detail/VCG41N1152795017.jpg" mode="heightFix"></image>
    
    <!-- 商品信息区域 -->
    <view class="booking-info-box">
    
    <!-- 商品价格 -->
    <view class="price">
      价格：{{booking_info.price}}
    </view>
    
    <!-- 商品信息主体 -->
    <view class="booking-info-body">
      <!-- 商品名字 -->
      <view class="booking-name">
        {{booking_info.name}}
      </view>
      <!-- 商品详情 -->
      <view class="booking-deta">
        {{booking_info.detail}}
      </view>
    </view>
    </view>
    
    <!-- 商品导航 -->
    <view class="booking_nav">
      <button>{{buttonGroup.text}}</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        booking_info: {id: 1, name: "半天陪诊", price: "150.00元/次", img: '../../static/detail/VCG41N1152795017.jpg', detail: "陪诊就医，预约挂号,省时省力省心"},
        buttonGroup: {text: '立即购买', backgroundColor: '#ffa200', color: '#fff'}
      };
    },
    onLoad(options) {
      const booking_id = options.booking_id
      this.getBookingDetail(booking_id)
    },
    methods: {
      async getBookingDetail(booking_id) {
        const {data:res} = get.booking_id({booking_id})
      }
    }
  }
</script>

<style lang="scss">
.booking-info-box {
  padding: 10px;
  .price {
    color: #C00000;
    font-size: 18px;
    margin: 10px 0;
  }
  .booking-info-body {
    display: flex;
    flex-direction: column;
    .booking-name {
      font-size: 20px;
      margin-right: 10px;
    }
    .booking-deta {
      padding: 10px;
      border-top: 1px solid #efefef;
      color: #aaaaff;
    }
  }
}

.booking_nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
